<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小视频</title>
</head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="/live/static/app/mui.css">
<style>
    .mui-bar{
        height: 70px;
        line-height: 70px;
        background: #000;
    }
    .mui-title{
        text-align: left;
        padding-left: 50px;
        height: 70px;
        line-height: 70px;
        color: #fff;
    }
    #img{
        position: absolute;
        top:50%;
        left:50%;
        margin-top: -40px;
        margin-left: -40px;
        opacity: 0.7;
    }
    #a{
        display: block;
        width: 100%;
        background:#000;
        height: 100%;
    }
</style>
<body>
    <header class="mui-bar mui-bar-nav" style="box-shadow: none;">
        <img src="http://7xt3n6.com1.z0.glb.clouddn.com/2017-03-15_58c8a464c9a70.png" style="height: 60px; width: 60px;" />
        <h1 class="mui-title">小视频</h1>
        <a href="javascript:download()" class="mui-btn" style="display: block; float: right; background: red;border-color: red; margin-top: 10px;color: #fff; margin-right: 3px">下载APP</a>
    </header>
    <div class="mui-content" id="content" style="position: relative; margin-top: 20px">
        <a href="javascript:set_video()">
            <img src="/live/static/app/play.png" style="width: 80px; height: 80px;" id="img" />
        </a>
        <a href="javascript:set_video()" id="a">
            <video style="width: 100%; display: none" webkit-playsinline=true onplay="document.getElementById('img').style.display = 'none';" onpause="document.getElementById('img').style.display = '';" id="video" src="{$data.url}"></video>
        </a>
        <div style="bottom: 0px; width: 80%; position: absolute; z-index: 2; left:20px; color: #fff; font-weight: bold;">
            <div>{$data.title}</div>
            <div style="height: 5px;"></div>
            <div>
                <img src="{$data.headimg}" style="width: 45px; height: 45px;" /> {$data.name}
                <a class="mui-btn" style="display: block; float: right; background: #F41E6A; border-color: #F41E6A;  color: #fff" href="javascript:download()">关注</a>
            </div>
            <div style="height: 5px;"></div>
        </div>
    </div>
    <script>
        var image = '{$data.image}';
        if(image != ''){
            document.getElementById('a').style.background = 'url("{$data.image}") no-repeat ';
            document.getElementById('a').style.backgroundSize="100% 100%";
        }
        var height = document.documentElement.clientHeight;
        document.getElementById('content').style.height = height - 20 + "px";
        document.getElementById('video').style.height = height - 70 + "px";
        function set_video() {
            var bool = document.getElementById('video').paused;
            if(bool){
                document.getElementById('video').play();
            }else{
                document.getElementById('video').pause();
            }
        }
        function download()
        {
            alert('下载链接')
        }
        document.write('<script src="__URL__/share?view=ok&vid={$data.id}"><\/script>');
    </script>
</body>
</html>